<template>
  <div class="card w-full max-w-md shadow-xl bg-base-100">
    <div class="card-body">
      <h2 class="card-title mb-4">重置密码</h2>
      <form @submit.prevent="onSubmit">
        <div class="form-control mb-4">
          <label class="label" for="newPassword">
            <span class="label-text">新密码</span>
          </label>
          <input
              id="newPassword"
              v-model="newPassword"
              type="password"
              class="input input-bordered input-primary"
              placeholder="请输入新密码"
              required
          />
        </div>
        <div class="form-control mb-4">
          <label class="label" for="confirmPassword">
            <span class="label-text">确认新密码</span>
          </label>
          <input
              id="confirmPassword"
              v-model="confirmPassword"
              type="password"
              class="input input-bordered input-primary"
              placeholder="请再次输入新密码"
              required
          />
        </div>
        <div v-if="errorMsg" class="text-error mb-2">{{ errorMsg }}</div>
        <div class="card-actions justify-end">
          <button type="submit" class="btn btn-primary w-full">提交</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const newPassword = ref('')
const confirmPassword = ref('')
const errorMsg = ref('')

function onSubmit() {
  if (newPassword.value !== confirmPassword.value) {
    errorMsg.value = '两次输入的密码不一致！'
    return
  }
  errorMsg.value = ''
  // TODO: 这里添加重置密码的 API 调用逻辑
  alert('密码已重置！')
}
</script>
